<template>
  <div class="home">
    <el-row :gutter="20">
      <!--左侧内容-->
      <el-col :span="16">
        <SlideImage :carousel-list="carouselList"></SlideImage>
        <!--国产剧-->
        <div class="lastest-drama">
          <h3>最新国产剧</h3>
          <el-row :gutter="20">
            <el-col :xs="3" :sm="3" :md="4" :lg="4" :xl="2" v-for="item in dramasZh" :key="item.id">
              <resource-cover :drama="item"></resource-cover>
            </el-col>
          </el-row>
        </div>
        <!--美剧-->
        <div class="lastest-drama">
          <h3>最新美剧</h3>
          <el-row :gutter="20">
            <el-col :xs="3" :sm="3" :md="4" :lg="4" :xl="2" v-for="item in dramasEn" :key="item.id">
              <resource-cover :drama="item"></resource-cover>
            </el-col>
          </el-row>
        </div>
        <!--日剧-->
        <div class="lastest-drama">
          <h3>最新日剧</h3>
          <el-row :gutter="20">
            <el-col :xs="3" :sm="3" :md="4" :lg="4" :xl="2" v-for="item in dramasJp" :key="item.id">
              <resource-cover :drama="item"></resource-cover>
            </el-col>
          </el-row>
        </div>

        <div class="lastest-drama">
          <h3>电影</h3>
          <el-row :gutter="20">
            <el-col :xs="3" :sm="3" :md="4" :lg="4" :xl="2" v-for="item in movies" :key="item.id">
              <resource-cover :drama="item"></resource-cover>
            </el-col>
          </el-row>
        </div>

        <div class="lastest-drama">
          <h3>动漫</h3>
          <el-row :gutter="20">
            <el-col :xs="3" :sm="3" :md="4" :lg="4" :xl="2" v-for="item in animates" :key="item.id">
              <resource-cover :drama="item"></resource-cover>
            </el-col>
          </el-row>
        </div>

      </el-col>
      <!--右侧内容-->
      <el-col :span="8">
        <!--热播视频-->
        <hot-show :dramas="dramasPopular"></hot-show>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src

import SlideImage from "../../components/SlideImage";
import ResourceCover from "../../components/ResourceCover";
import ResourceCoverHor from "../../components/ResourceCoverHor";
import HotShow from "../../components/HotShow";
import {topPublish, popularDrama} from "../../api/drama";

export default {

  name: 'Home',
  data() {
    return {
      dramasZh: [],//国产剧
      dramasEn: [],
      dramasJp: [],
      dramasPopular: [],
      movies: [],
      animates: [],
      titiles: ['最新国产剧', '最新欧美剧', '最新日韩剧', '电影', '动漫'],
      dramas: [],//剧目信息列表
      carouselList: []
    }
  },
  methods: {
    getDramas() {
      topPublish().then(response => {
        let data = response.data.data;
        this.dramasZh = data.dramasZh;
        this.dramasEn = data.dramasEn;
        this.dramasJp = data.dramasJp;
        this.movies = data.movies;
        this.animates = data.animates;
        this.dramasPopular = data.popular
        this.carouselList = data.carouselList
      }).catch(err => console.log(err))
    },
  },
  components: {HotShow, ResourceCoverHor, ResourceCover, SlideImage},
  created() {
    console.log(1111)
    this.getDramas()
  },
}
</script>
<style scoped>
.home {
  /*height: 100vh;*/
}

.lastest-drama {
  background-color: #FFFFFF;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
}

.lastest-drama h3 {
  margin: 10px 0;
  font-weight: 600;
}


</style>
